<!-- 登录页开发样例 -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/login-demo.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="logo">Logo</div>
    <!-- <form id="myForm">
      <div style="font-weight: 700; margin-bottom: 10px">欢迎登录PC系统</div>
      <div class="input-wrap">
        <img src="../img/ico-wdzq@2x.png" alt="" width="20" />
        <span></span>
        <input type="text" placeholder="请输入" id="name" name="name" />
      </div>
      <div class="input-wrap">
        <img src="../img/ico-wdzq@2x.png" alt="" width="20" />
        <span></span>
        <select style="width: 170px" id="age" name="age">
          <option value="1">选项1</option>
          <option value="2">选项1</option>
          <option value="3">选项1</option>
        </select>
      </div>
      <div>
        <button id="btn">登录</button>
      </div>
    </form> -->

    <form action="">
      <div>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" />
      </div>
      <div><button id="my-btn">登录</button></div>
    </form>
  </body>
  <script>
    const ele = document.getElementById("my-btn");
    console.log(ele);
    document
      .getElementById("my-btn")
      .addEventListener("click", function (event) {
        event.preventDefault();
        console.log(111);
        const name = document.getElementById("name").value;
        console.log(name);
        if (!name) {
          alert("用户名不能为空"); // 用户名包含中文、英文、数字
        } else if (name.length < 1 || name.length > 8) {
          alert("用户名的长度必须是1-8位以内");
        } else if (name !== "xiaozhang") {
          alert("用户名密码错误"); // 英文数字_@6-8位
        } else {
          alert("登录成功");
        }
      });

    // document.getElementById("btn").addEventListener("click", (event) => {
    //   event.preventDefault();
    //   const name = document.getElementById("name").value;
    //   if()
    //   console.log(name);
    // });

    // 提交form表单信息，预防提交过程中出现页面跳转
    // document
    //   .getElementById("myForm")
    //   .addEventListener("submit", function (event) {
    //     event.preventDefault(); // 阻止表单的默认提交行为
    //     const formData = Object.fromEntries(new FormData(this));
    //     let name = formData.name;
    //     if (name === "") {
    //       alert("姓名不能为空");
    //     }
    //     // console.log(formData.name);

    //     // console.log(JSON.stringify(Object.fromEntries(new FormData(this))));

    //     // // 使用fetch API异步提交表单数据
    //     // fetch("your-server-endpoint", {
    //     //   method: "POST",
    //     //   body: new FormData(this), // 或者使用JSON.stringify(Object.fromEntries(new FormData(this)))
    //     // })
    //     //   .then((response) => response.json())
    //     //   .then((data) => {
    //     //     console.log("Success:", data);
    //     //     // 在这里处理响应，例如更新页面内容等
    //     //   })
    //     //   .catch((error) => {
    //     //     console.error("Error:", error);
    //     //   });
    //   });
  </script>
</html>
